<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, onBeforeUnmount, ComponentInternalInstance } from "vue"


// this
const instance: ComponentInternalInstance | null = getCurrentInstance();
let _this: any = instance ? instance.appContext.config.globalProperties : null;

// sub-Components props
const props = defineProps({
  name: String,
  subTitle: String
})

// sub-Components emit
const emit = defineEmits(['myclick']);

// onBeforeUnmount
onBeforeUnmount((): void => {
})

// onMounted
onMounted(async (): Promise<void> => {
})

// Exportation
defineExpose({
})
</script>


<template>
  <div class="nymo-miniBox">
    <svg-icon class="nymo-miniBox-svg" :name="name"></svg-icon>
    <div>{{ subTitle }}</div>
  </div>
</template>


<style lang="scss" scoped>
@import "styles/mixin.scss";
$headH: 2.5rem;
.nymo-miniBox {
  height: 100%;
  width: 100%;
  position: relative;
  box-shadow: inset 0px 0px 50px
    rgba($color: rgba(255, 255, 255, 0.932), $alpha: 0.4);
  border-radius: 5px;
  filter: blur(0.2px);
  @include flex-column-between-center;
  font-size: 1rem;
  .nymo-miniBox-svg {
    margin: 0px !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 1.5rem !important;
  }
}
</style>
